<template>
	<view class="main">
		<u-navbar
			:safeAreaInsetTop="false"
			title=""
			leftIconColor="#fff"
			bgColor="#043237"
			:fixed="true"
			:autoBack="true"
			leftText="猫币提现"
		>
		</u-navbar>
		<view class="main_recharge_head">
			<view class="head_box">
				<view class="head_row">
					猫币余额：{{info.money}}
					<view class="chongzhi" @click="RechargeModal">提现</view>
				</view>
				<view class="head_row" style="font-size: 32rpx;margin-top:20rpx;height: 50rpx;line-height: 50rpx;">说明：1猫币=1元</view>
			</view>
			<u-tabs 
				:list="tabslist" 
				@click="clickTable"
				:activeStyle="{
					color: '#fff',
					fontWeight: 'bold'
				}"
				:inactiveStyle="{
					color: '#fff',
					transform: 'scale(1)'
				}"
			></u-tabs>
		</view>
		<view class="main_recharge_content">
			<veiw  v-if="tableactive == 0">
				<block v-for="(item,index) in list">
					<view class="company_box flex-wrap" >
						<view class="title" >{{item.describe || ""}}</view>
						<view style="display: flex;justify-content: space-between;width: 100%;">
							<view class="time">{{form.pm == 1 ? '获取时间：' : '操作时间'}}{{item.create_time || ""}}</view>
							<view style="color: firebrick;font-weight: bold;">￥{{item.money || 0}}</view>
						</view>
					</view>
				</block>
				<view class="loadingText">{{loadingText}}</view>
			</veiw>
			<view class="main_recharge_foot" v-if="tableactive == 1">
				<text style="color: red;">猫币说明</text>
				<text>1、简历被查看奖励2猫币; </text>
				<text>2、提现时间：每周三</text>
				<!-- <text>3、邀约人才5猫币(人才确定后扣取) </text> -->
			</view>
			<view  v-if="tableactive == 2">
				<block v-for="(item,index) in userlist">
					<view class="qiyebox" style="align-items: center;" @click="goto('/pages/enterprise/resumedetails?id='+item.uid+'&source=1')">
						<view style="flex: 1;width: 80rpx;height: 80rpx;margin-right:10rpx">
							<image style="max-width:100%;max-height:100%" src="@/static/img/renc.jpg"></image>
						</view>
						<view class="company_item_box" style="flex: 3;">
							<view class="company_name">
								{{item.name || ""}} / {{item.age1 || "25岁"}}
							</view>
							<view class="company_addr">
								{{item.education || ""}} / {{item.skill || ""}}
							</view>
						</view>
						<view style="display: flex;flex: 1;align-items: center;">	
							<image style="max-width:50rpx;max-height:50rpx;" src="@/static/img/hot.png"></image>
							{{item.view}}
						</view>
					</view>
				</block>
			</view>
		</view>
		<u-modal
			title="猫币提现"
			:show="showModal"
			showCancelButton
			asyncClose
			@confirm="handleWithdraw"
			@cancel="() => showModal = false"
		>
			<u--form
				labelPosition="left"
				ref="form1"
			>
				<u-form-item>
					<u-tag text="提现到银行卡" @click="operation(1)" :borderColor=" '#fff'" :color="'#fff'" :bgColor="withdraw.type == 1 ? '#a998f6' : '#ccc'" plain size="large"></u-tag>
					<u-tag text="提现到微信余额" @click="operation(2)" :borderColor=" '#fff'" :color="'#fff'" :bgColor="withdraw.type == 2 ? '#a998f6' : '#ccc'" plain size="large"></u-tag>
				</u-form-item>
				<u-form-item v-if="withdraw.type == 1">
					<u--input
						placeholder="输入提现到账银行"
						v-model="withdraw.bankname"
						color="#333"
						fontSize="34rpx"
					></u--input>
				</u-form-item>
				<u-form-item v-if="withdraw.type == 1">
					<u--input
						placeholder="输入开卡人姓名"
						v-model="withdraw.bankcarduser"
						color="#333"
						fontSize="34rpx"
					></u--input>
				</u-form-item>
				<u-form-item v-if="withdraw.type == 1">
					<u--input
						placeholder="输入银行卡号"
						v-model="withdraw.bankcardnum"
						color="#333"
						fontSize="34rpx"
					></u--input>
				</u-form-item>
				<u-form-item>
					<u--input
						placeholder="提现猫币"
						prefixIcon="rmb"
						v-model="withdraw.money"
						color="#ee0101"
						fontSize="42rpx"
						inputAlign="left"
						prefixIconStyle="font-size: 40rpx;font-weight: bold;color: #000"
					></u--input>
				</u-form-item>
			</u--form>
		</u-modal>
		<Tabbar :count="200"></Tabbar>
	</view>
</template>

<script>	
	import {getMoneyAccount,getUserInfo,withdraw,RechargeSuccess} from "@/api/user"
	import { getKingResumeList } from '@/api/ranking.js'
	import Tabbar from "@/components/Tabbar"
	export default {
		components: {
			Tabbar,
		},
		data() {
			return {
				showModal:false,
				tableactive:0,
				loadingText: '上拉显示更多',
				info:'',
				list:[],
				userlist:[],
				withdraw:{
					money: '',
					type:1,//'提现到账类型 1银行卡 2微信钱包 3支付宝'
					bankname:'',//银行名称
					bankcarduser:'',//银行卡用户姓名
					bankcardnum:''//银行卡卡号
				},
				form:{
					page:1,
					pageSize:10,
					total:0,
					keyword:'',
					pm:1,
				},
				tabslist: [{
						name: '获取记录',
				}, {
						name: '提现设置',
				}, {
						name: '秀英排行榜名次'
				}]
			}
		},
		onLoad() {
			this.getUserInfo()
			this.account(1)
		},
		onPullDownRefresh() {
			this.form.page = 1
			this.account(this.form.pm)
		},
		onReachBottom() {
			this.getMoreList();
		},

		methods: {
			getUserInfo(){
				getUserInfo({}).then(res=>{
					if(res.code == 200){
						this.info = res.data
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			
			//获取人才信息
			getResume() {
				getKingResumeList({}).then(res=>{
					if(res.code == 200){
						this.userlist = res.data
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			clickTable(e){
				this.tableactive = e.index
				
				switch(e.index){
					case 0:
						this.list = []
						this.account(1)
						break;
					case 1:
						console.log(11111)
						break;
					case 2:
						this.userlist = []
						this.getResume()
						break;
					default:
						
						break;
				}
			},
			account(pm){
				this.form.pm = pm
				getMoneyAccount(this.form).then(res=>{
					if(res.code == 200){
						this.list = res.data.data
						this.form.total = res.data.total
					}
				})
			},
			
			getMoreList() {
				this.loadingText = '-- 正在加载 --'
				getMoneyAccount(this.form).then(res=>{
					if (res.code == 200) {
						if (res.data.data.length == 0 || res.data.data == null) {
							this.loadingText = '-- 暂无更多 --'
							return false;
						}
						var newlist = res.data.data;
						this.list = this.list.concat(newlist)
						this.form.page ++
					}
				});
			},
			
			goto(tourl) {
				uni.navigateTo({
					url: tourl
				});
			},
			
			operation(type){this.withdraw.type = type},
			
			RechargeModal(){
				this.showModal = true
			},
			handleWithdraw(){
				let day = new Date().getDay()
				if (day != 3) {
					return uni.showToast({
						icon: 'none',
						title: '请星期三再来提现'
					});
				}
				
				let that = this
				// saveReserve 为业务接口
				withdraw(this.withdraw).then(res => {
				this.showModal = false
					if(res.code === 200) {
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none'
						});	
					}
					else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}).catch(err => {
					console.log(err);
				})
			},
		}
	}
</script>

<style lang="scss">
	.main{
		.u-navbar__content{
			opacity: 0.1 !important;
			background:none !important;
		}
		.main_recharge_head{
			background-image: url('');
			background-repeat:no-repeat;
			background-attachment:fixed;
			background-size:cover;
			width: 750rpx;
			padding-top: 50rpx;
			margin-top: 70rpx;
			.head_box{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				color: #fff;
				.head_row{
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					text-align: center;
					width: 100%;
					font-size: 42rpx;
					height: 100rpx;
					line-height: 100rpx;
					align-items: center;
					.chongzhi{
						font-size: 26rpx;
						background-color: #989dfd;
						color: #fff;
						height: 40rpx;
						line-height: 40rpx;
						padding: 6rpx 20rpx;
						margin-left: 20rpx;
						border-radius: 6rpx;
					}
				}
			}
			image{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				max-height: 100%;
			}
		}
		.main_recharge_content{
			padding: 80rpx 40rpx;
			.flex-wrap{
				flex-wrap: wrap;  
			}
			
			.loadingText {
				padding: 20rpx 0 40rpx 0;
				text-align: center;
				color: #310D05;
				font-size: 28rpx;
			}
			.company_box{
				display: flex;  
				width: 100%;
				padding: 20rpx 0;
				border-bottom: 1px solid #ccc;
				font-size: 28rpx;
				.company_logo{
					display: flex;
					justify-content: center;
					align-items: center;
					width:100rpx; 
					height:100rpx;
					image{
						max-width: 100% !important;
						max-height: 100% !important;
					}
				}
				
				//文字溢出...
				.spill {
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
				}
				.company_name{
					font-size: 34rpx;
					height: 60rpx;
					line-height: 60rpx;
				}
				.company_handle{
					margin: 20rpx;
					.handle_shenqin{
						width: 200rpx;
						height: 40rpx;
					}
				}
				.company_intro{
					line-height: 50rpx;
					color: #777777;
					margin-bottom: 20rpx;
				}
				.title{
					display: flex;
					flex-wrap: wrap;    
					justify-content: space-between;
					width: 100%;
					font-weight: bold;
					color: blue;
					line-height: 50rpx;
				}
				.time{
					color: #666;
				}
			}
			.qiyebox{
				display: flex;
				align-items: center;
				background-color: #f9f9ff;
				padding: 20rpx;
				font-size: 28rpx;
				color: #000;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				.company_name{
					width:460rpx;
					font-size: 30rpx;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
				}
				.company_handle{
					margin: 20rpx;
					.handle_shenqin{
						width: 200rpx;
						height: 80rpx;
					}
				}
				.company_intro{
					line-height: 50rpx;
					color: #777777;
					margin-bottom: 20rpx;
				}
				.company_addr{
					display: flex;
					align-items: center;
					color: #777777;
					font-size: 28rpx;
				}
			}
			.content_box{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.title{
					width: 100%;
					font-weight: bold;
					font-size: 26rpx;
					margin-bottom: 50rpx;
				}
			}
		
			.main_recharge_foot{
				background-color: #f6f4fe;
				border-radius: 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				margin: 50rpx 0rpx;
				padding:80rpx 70rpx;
				text{
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					color: #222222;
				}
				image{
					width: 700rpx;
					max-height: 340rpx;
				}
			}
		}
	}
</style>